import React from 'react';
import { Link } from 'react-router-dom';
import { ProductList } from '../features';
import { Button, Container, Stack, Group, Title, Text, Box, Grid, Card } from '@mantine/core';
import { IconHome, IconUsers, IconGrid3x3, IconSearch, IconArrowLeft, IconHeart } from '@tabler/icons-react';

const ProductsPage: React.FC = () => {
  return (
    <Container size="xl">
      <Stack gap="xl">
        {/* Header */}
        <Group justify="space-between" align="flex-start">
          <Box>
            <Title order={1} size="h1">产品展示</Title>
            <Text c="dimmed" mt="sm">
              浏览我们的产品目录，支持搜索、筛选和分页功能
            </Text>
          </Box>
          <Group gap="sm">
            <Button
              component={Link}
              to="/"
              variant="outline"
              leftSection={<IconHome size={16} />}
            >
              返回首页
            </Button>
            <Button
              component={Link}
              to="/users"
              variant="outline"
              leftSection={<IconUsers size={16} />}
            >
              用户管理
            </Button>
          </Group>
        </Group>

        {/* Features Overview */}
        <Card style={{ background: 'linear-gradient(to right, var(--mantine-color-violet-0), var(--mantine-color-pink-0))' }} p="lg">
          <Title order={2} size="h3" mb="md">展示特性</Title>
          <Grid>
            <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
              <Group gap="sm">
                <Box
                  w={32}
                  h={32}
                  bg="violet.1"
                  style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <IconGrid3x3 size={16} color="var(--mantine-color-violet-6)" />
                </Box>
                <Text size="sm" c="gray.7">网格布局</Text>
              </Group>
            </Grid.Col>
            <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
              <Group gap="sm">
                <Box
                  w={32}
                  h={32}
                  bg="blue.1"
                  style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <IconSearch size={16} color="var(--mantine-color-blue-6)" />
                </Box>
                <Text size="sm" c="gray.7">智能搜索</Text>
              </Group>
            </Grid.Col>
            <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
              <Group gap="sm">
                <Box
                  w={32}
                  h={32}
                  bg="green.1"
                  style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <IconArrowLeft size={16} color="var(--mantine-color-green-6)" />
                </Box>
                <Text size="sm" c="gray.7">分页导航</Text>
              </Group>
            </Grid.Col>
            <Grid.Col span={{ base: 12, sm: 6, lg: 3 }}>
              <Group gap="sm">
                <Box
                  w={32}
                  h={32}
                  bg="yellow.1"
                  style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                >
                  <IconHeart size={16} color="var(--mantine-color-yellow-6)" />
                </Box>
                <Text size="sm" c="gray.7">评分展示</Text>
              </Group>
            </Grid.Col>
          </Grid>
        </Card>

        {/* Product List */}
        <Card shadow="sm" withBorder p="lg">
          <ProductList />
        </Card>

        {/* Technology Stack */}
        <Card style={{ background: 'linear-gradient(to right, var(--mantine-color-blue-0), var(--mantine-color-indigo-0))' }} p="lg">
          <Title order={2} size="h3" mb="md">技术实现</Title>
          <Grid>
            <Grid.Col span={{ base: 12, md: 4 }}>
              <Stack gap="sm">
                <Title order={3} size="h4" c="gray.8">数据管理</Title>
                <Stack gap="xs">
                  <Text size="sm" c="gray.6">• React Context API</Text>
                  <Text size="sm" c="gray.6">• TypeScript 类型安全</Text>
                  <Text size="sm" c="gray.6">• 本地状态管理</Text>
                  <Text size="sm" c="gray.6">• 数据持久化</Text>
                </Stack>
              </Stack>
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 4 }}>
              <Stack gap="sm">
                <Title order={3} size="h4" c="gray.8">UI 组件</Title>
                <Stack gap="xs">
                  <Text size="sm" c="gray.6">• 响应式设计</Text>
                  <Text size="sm" c="gray.6">• 组件化架构</Text>
                  <Text size="sm" c="gray.6">• 可复用组件</Text>
                  <Text size="sm" c="gray.6">• 现代化界面</Text>
                </Stack>
              </Stack>
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 4 }}>
              <Stack gap="sm">
                <Title order={3} size="h4" c="gray.8">用户体验</Title>
                <Stack gap="xs">
                  <Text size="sm" c="gray.6">• 流畅交互</Text>
                  <Text size="sm" c="gray.6">• 即时反馈</Text>
                  <Text size="sm" c="gray.6">• 直观操作</Text>
                  <Text size="sm" c="gray.6">• 优雅动画</Text>
                </Stack>
              </Stack>
            </Grid.Col>
          </Grid>
        </Card>

        {/* Code Architecture */}
        <Card shadow="sm" withBorder p="lg">
          <Title order={2} size="h3" mb="md">架构亮点</Title>
          <Grid>
            <Grid.Col span={{ base: 12, md: 6 }}>
              <Stack gap="md">
                <Group align="flex-start" gap="sm">
                  <Box
                    w={32}
                    h={32}
                    bg="blue.1"
                    style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 4 }}
                  >
                    <IconGrid3x3 size={16} color="var(--mantine-color-blue-6)" />
                  </Box>
                  <Box>
                    <Title order={3} size="h5" c="gray.9">组件复用</Title>
                    <Text size="sm" c="gray.6" mt={4}>
                      通用 UI 组件库，支持主题定制和样式扩展
                    </Text>
                  </Box>
                </Group>
                <Group align="flex-start" gap="sm">
                  <Box
                    w={32}
                    h={32}
                    bg="green.1"
                    style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 4 }}
                  >
                    <IconArrowLeft size={16} color="var(--mantine-color-green-6)" />
                  </Box>
                  <Box>
                    <Title order={3} size="h5" c="gray.9">性能优化</Title>
                    <Text size="sm" c="gray.6" mt={4}>
                      防抖搜索、虚拟滚动、懒加载等性能优化策略
                    </Text>
                  </Box>
                </Group>
              </Stack>
            </Grid.Col>
            <Grid.Col span={{ base: 12, md: 6 }}>
              <Stack gap="md">
                <Group align="flex-start" gap="sm">
                  <Box
                    w={32}
                    h={32}
                    bg="violet.1"
                    style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 4 }}
                  >
                    <IconUsers size={16} color="var(--mantine-color-violet-6)" />
                  </Box>
                  <Box>
                    <Title order={3} size="h5" c="gray.9">类型安全</Title>
                    <Text size="sm" c="gray.6" mt={4}>
                      完整的 TypeScript 类型定义，编译时错误检查
                    </Text>
                  </Box>
                </Group>
                <Group align="flex-start" gap="sm">
                  <Box
                    w={32}
                    h={32}
                    bg="yellow.1"
                    style={{ borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 4 }}
                  >
                    <IconHeart size={16} color="var(--mantine-color-yellow-6)" />
                  </Box>
                  <Box>
                    <Title order={3} size="h5" c="gray.9">用户体验</Title>
                    <Text size="sm" c="gray.6" mt={4}>
                      流畅的交互动画、直观的视觉反馈和无障碍设计
                    </Text>
                  </Box>
                </Group>
              </Stack>
            </Grid.Col>
          </Grid>
        </Card>

        {/* Navigation */}
        <Group justify="center" pt="lg">
          <Button
            component={Link}
            to="/users"
            variant="gradient"
            gradient={{ from: 'violet', to: 'pink' }}
            size="md"
            rightSection={<IconArrowLeft size={16} />}
            style={{
              boxShadow: 'var(--mantine-shadow-lg)',
              transition: 'transform 0.2s ease',
            }}
            styles={{
              root: {
                '&:hover': {
                  transform: 'scale(1.05)',
                },
              },
            }}
          >
            查看用户管理
          </Button>
        </Group>
      </Stack>
    </Container>
  );
};

export default ProductsPage;